<script lang="ts" setup>
import { ref,inject , onMounted} from "vue";
import HeaderDemo from "../components/HeaderDemo.vue";
import { el } from "element-plus/es/locales.mjs";
import { Search } from '@element-plus/icons-vue';
// import imgSrc from '../img/竹简文字背景.png';
import { useRouter,useRoute } from 'vue-router'
const axios = inject('axios') //注入 axios
// const imgSrc = new URL('../img/竹简文字背景.png', import.meta.url).href
// 创建路由对象，用于编程式导航
const router = useRouter()
// 使用 Vue Router 获取当前路由
const route = useRoute();
console.log(route);
//搜索结果内容
const SearchResults = ref("");

const searchQuery  = ref([]);//获取传过来的搜索参数
// 使用 ref 来定义响应式变量
const input = ref('');
//获取简介内容
const introduction = ref("");

// 定义后端 图片API 接口路径
const imageBasePath = 'http://localhost:8080/api/images/';

// 获取完整的图片 URL
const getImageUrl = (fileName) => {
    console.log("imageURL:" + imageBasePath + fileName)
    return fileName ? `${imageBasePath}${fileName}` : '0 (3).jpg'; // 默认图片处理
};

// 搜索方法
const handleSearch = async () => {
  // 获取查询参数
  const search = route.query.search;
  if (search) {
    searchQuery.value = search;
    console.log("searchQuery:"+searchQuery.value);
  };

  console.log('搜索内容1：', searchQuery.value);
  if (searchQuery.value) {
    try {
      // 构建请求 URL，包括查询参数
      const url = `http://localhost:8080/api/getworklistByName/?Wname=${searchQuery.value}`;
      // 发送 GET 请求
      const response = await axios.get(url);
      // 处理响应数据
      console.log('搜索结果：'+response.data);
      console.log('搜索结果2：', response.data.data);
      console.log('搜索结果2：', response.data.data[0]);
      SearchResults.value = response.data.data;
      console.log("SearchResults:"+JSON.stringify(SearchResults.value,null,2));

      // 可以在这里进行页面跳转或其他操作,
    } catch (error) {
      console.error('搜索请求失败：', error);
    }
  }
};
const workType = ref<string>(''); // 用于存储剧本类型的响应式数据

// 搜索按钮点击事件
const Search = () => {
  console.log('搜索内容：', input.value);
  if (input.value) {
    
    // 使用 Vue Router 导航到搜索结果页面，并传递搜索参数
    router.push({
      path: '/SearchResults',
      query: { search: input.value },
    });
  }
};
// 页面加载时执行搜索方法
onMounted(() => {
  handleSearch();
});

// 暴露 searchQuery 供模板使用
defineExpose({
  searchQuery
});
</script>

<template>
  <div class="body">
    <el-header style="padding: 0px 0px;">
      <div class="logo">
        <HeaderDemo />
      </div>
    </el-header>
    <el-main style="width: 100%;" class="main">
      <div class="container">
        <div class="search-box">
          <Search style="width: 1.2em; height: 35px; margin-right: 8px;color: #409eff;" />
          <input placeholder="请输入内容" v-model="input" clearable style="width: 500px;" class="custom-input"></input>
          <el-button type="primary" @click="handleSearch" style="height: 31px; width: 70px;"
            class="custom-button">搜索</el-button>
        </div>

      </div>
      <el-divider>
        <el-icon><star-filled /></el-icon>
      </el-divider>
      <el-row :gutter="0" class="row" justify="left" >
          <el-card class="box-card card-with-margin" v-for="(item, index) in SearchResults" :key="index" @click="router.push({ path: '/workprofile/'+ item.wid })">
            <el-image :src="getImageUrl(item.wimage)" fit="cover" style="width: 100px; height: 150px; margin-right: 20px;"></el-image>
            <div class="text-item">
              <span type="primary" :underline="false" style="" class="title">{{ item.wname }}</span><br />
              <span type="primary" :underline="false" style="font-size: 14px;">作者:{{ item.uid }}</span><br />
              <span type="primary" :underline="false" style="font-size: 14px;">类型：{{ item.themename }}</span><br />
              <!-- 从简介中选出50个字符 -->
              <!-- <span type="primary" :underline="false" style="" class="text">简介：</span> -->
              <span type="primary" :underline="false" style="" class="text">简介：{{ item.introduction.length > 50 ? item.introduction.substring(0, 50) + '...' : item.introduction }}</span>
            </div>
          </el-card>
      </el-row>
    </el-main>
  </div>
</template>

<style scoped>
.main{
  padding: 10px;
}
.body {
  /* background-color: #f5f5f5; */
  height: 100%;
  width: 100%;
  padding: 0px 0px;
}

.logo {
  width: 100%;
  height: 80px;
  background-image: url("../../public/images/mantianfanxing.jpg");
}

.container {
  display: flex;
  width: 100%;
  justify-content: center;
  /* 水平居中 */
  /* align-items: center;    垂直居中（如果需要的话） */
  /*height: 100vh;            如果想要垂直居中，需要设置容器的高度 */
  /* width: 555px; */
  padding: 5px;
  /* background-color: aqua; */
}
.search-box {
  background-color: #f6f7f8;
  padding: 0px 5px 0px 20px;
  width: 550px;
  height: 45px;
  margin-top: 20px;
  /* 子元素居中 */
  display: flex;
  align-items: center;
  /* 添加圆弧边框 */
  border: 1px solid #fafafa;
  /* 边框颜色和宽度 */
  border-radius: 2px;
  /* 圆弧的半径，根据需要调整 */
}
.custom-input {
  /* 自定义输入框样式 */
  border: none;
  /* 取消边框 */
  border-radius: 20px;
  /* 圆弧边框 */
  /* 其他样式 */
  background-color: #f5f5f5;
}

/* 取消获取焦点时的边框和阴影 */
.custom-input:focus {
  outline: none;
  /* 取消默认的焦点边框 */
  box-shadow: none;
  /* 取消默认的焦点阴影 */
  background-color: #f5f5f5;
}

.custom-button {
  /* 自定义按钮样式 */
  border: none;
  /* 取消边框 */
  /* 其他样式 */
}
.box-card{
  display: flex;
  justify-content: flex-start;
  width: 410px;  
  box-shadow: none ;
  margin-bottom: 10px;
  /* margin-right: 10px; */
  padding: 0px;
  /* background-color: aqua; */
}
.card-with-margin {
  margin: 5px; /* 上下左右各10px的间距 */
}
.text-item{
  width: 248px;
  /* background-color: aquamarine; */
  float: right;
}
.text{
  width: 200px;
  font-size: 13px;
  overflow-wrap: break-word;
}
.title{
  /* s设置为块元素 */
  display: block;
  font-size: 18px;
  margin-bottom: 20px;
  /* background-color: antiquewhite; */
}

</style>